<template>
  <el-upload action="#" list-type="picture-card" :auto-upload="false">
    <el-icon><Plus /></el-icon>
    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleDownload(file)"
          >
            <el-icon><Download /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </div>
    </template>
  </el-upload>
  <div>
    <el-dialog v-model="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="" />
  </el-dialog>
  </div>
  <Aa :msgs="msgs"  @updata="updata"></Aa>
  {{msgs}}
  {{person.age}}
  {{name}}
  <button @click="addfun">点击连接websocket</button>
  <button @click="addSend">点击发送消息</button>
</template>
<script setup>
import { ref,reactive,toRefs,onMounted } from 'vue'
import Aa from '@/components/text.vue'
import axios from 'axios'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

 const person = reactive({
   name:'zhangsan',
   age:10
 })
 let ws =ref()
 onMounted(() => {
  axios.get('http://127.0.0.1/api/user').then((res)=>{
      console.log(res)
    })
 })
 const {name,age} = toRefs(person)
  const msgs = ref('你好呀')
    const dialogImageUrl = ref('')
    const dialogVisible = ref(false)
    const disabled = ref(false)
  const updata = (a)=>{
    console.log(a);
    msgs.value = a
  }
    const handleRemove = (file) => {
      console.log(file)
    }

    const handlePictureCardPreview = (file) => {
      dialogImageUrl.value = file.url
      dialogVisible.value = true
    }

    const handleDownload = (file) => {
      console.log(file)
    }
  const addfun=()=>{
     ws= new WebSocket('ws://127.0.0.1:9999')
    ws.onopen=()=>{
     console.log('连接成功了');
    }
    ws.onclose=()=>{
      console.log('连接失败了');
    }
    ws.onmessage=(msg)=>{
      console.log('接收到服务器发送的内容是:' + msg.data);
    }

  }
  const addSend=()=>{
    ws.send('你好服务器')
  }
 

</script>
